Middleman 環境の構築: 研究室Web(1)

2018/8/24 執筆

自作のシステムで静的なWeb page を作っていたが、Middleman というシステムで静的な Web page を作れることを知った。コースのページを作り変える前に、自分の研究室のページを Middleman で再構築してみる。どうせ忘れてしまうので、覚書をリアルタイムに書きなぐる事とする。

とりあえずディレクトリを作成、git の初期化、.gitignore の作成、Gemfile の作成

code: shell

$ mkdir hkob_middleman

$ cd hkob_middleman

$ git init

$ bundle init

Gemfile を編集 (middleman, middleman-blog, middleman-livereload' を追加)

code: Gemfile

# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem 'middleman'

gem 'middleman-blog'

gem 'middleman-livereload'

bundle install してみると、こんな感じでかなり色々なものがインストールされた

code: shell

bundle install --path vendor/bundle --jobs 4

Fetching gem metadata from https://rubygems.org/...............

Fetching gem metadata from https://rubygems.org/..

Resolving dependencies...

Fetching minitest 5.11.3

Fetching concurrent-ruby 1.0.5

Fetching i18n 0.7.0

Installing i18n 0.7.0

Installing minitest 5.11.3

Installing concurrent-ruby 1.0.5

Fetching thread_safe 0.3.6

Installing thread_safe 0.3.6

Fetching public_suffix 3.0.3

Fetching backports 3.11.3

Installing public_suffix 3.0.3

Installing backports 3.11.3

Using bundler 1.16.4

Fetching coffee-script-source 1.12.2

Fetching execjs 2.7.0

Installing coffee-script-source 1.12.2

Fetching sass 3.4.25

Installing execjs 2.7.0

Fetching contracts 0.13.0

Installing sass 3.4.25

Installing contracts 0.13.0

Fetching dotenv 2.5.0

Installing dotenv 2.5.0

Fetching eventmachine 1.2.7

Installing eventmachine 1.2.7 with native extensions

Fetching http_parser.rb 0.6.0

Installing http_parser.rb 0.6.0 with native extensions

Fetching erubis 2.7.0

Installing erubis 2.7.0

Fetching fast_blank 1.0.0

Installing fast_blank 1.0.0 with native extensions

Fetching fastimage 2.1.3

Installing fastimage 2.1.3

Fetching ffi 1.9.25

Fetching temple 0.8.0

Installing temple 0.8.0

Installing ffi 1.9.25 with native extensions

Fetching tilt 2.0.8

Installing tilt 2.0.8

Fetching hashie 3.6.0

Installing hashie 3.6.0

Fetching kramdown 1.17.0

Fetching rb-fsevent 0.10.3

Installing kramdown 1.17.0

Installing rb-fsevent 0.10.3

Fetching memoist 0.16.0

Installing memoist 0.16.0

Fetching thor 0.20.0

Installing thor 0.20.0

Fetching parallel 1.12.1

Installing parallel 1.12.1

Fetching rack 2.0.5

Installing rack 2.0.5

Fetching servolux 0.13.0

Installing servolux 0.13.0

Fetching tzinfo 1.2.5

Installing tzinfo 1.2.5

Fetching hamster 3.0.0

Fetching addressable 2.5.2

Installing hamster 3.0.0

Installing addressable 2.5.2

Fetching coffee-script 2.4.1

Installing coffee-script 2.4.1

Fetching uglifier 3.2.0

Installing uglifier 3.2.0

Fetching compass-import-once 1.0.5

Fetching haml 5.0.4

Installing compass-import-once 1.0.5

Fetching em-websocket 0.5.1

Installing haml 5.0.4

Installing em-websocket 0.5.1

Fetching middleman-cli 4.2.1

Fetching rack-livereload 0.3.17

Installing middleman-cli 4.2.1

Fetching activesupport 5.0.7

Installing rack-livereload 0.3.17

Installing activesupport 5.0.7

Fetching padrino-support 0.13.3.4

Installing padrino-support 0.13.3.4

Fetching padrino-helpers 0.13.3.4

Installing padrino-helpers 0.13.3.4

Fetching rb-inotify 0.9.10

Installing rb-inotify 0.9.10

Fetching listen 3.0.8

Installing listen 3.0.8

Fetching middleman-core 4.2.1

Installing middleman-core 4.2.1

Fetching middleman 4.2.1

Fetching middleman-livereload 3.4.6

Fetching middleman-blog 4.0.2

Installing middleman 4.2.1

Installing middleman-livereload 3.4.6

Installing middleman-blog 4.0.2

Bundle complete! 3 Gemfile dependencies, 47 gems now installed.

Bundled gems are installed into ./vendor/bundle

be middleman init --template=blog してみる。私の環境は bundle exec を be と略せるのでそうしている。

code: shell

$ be middleman init --template=blog

run git clone --depth 1 https://github.com/middleman/middleman-templates-blog /var/folders/sp/qsqd76z95kl945nbc56t4w_00000gp/T/d20180824-46394-1bzdneg from "."

Cloning into '/var/folders/sp/qsqd76z95kl945nbc56t4w_00000gp/T/d20180824-46394-1bzdneg'...

remote: Counting objects: 16, done.

remote: Compressing objects: 100% (14/14), done.

remote: Total 16 (delta 0), reused 13 (delta 0), pack-reused 0

Unpacking objects: 100% (16/16), done.

exist

create .gitignore

conflict Gemfile

Overwrite /Users/hkob/www2/hkob_middleman/Gemfile? (enter "h" for help) Ynaqdh

force Gemfile

create config.rb

create source/2012-01-01-example-article.html.markdown

create source/calendar.html.erb

create source/feed.xml.builder

create source/index.html.erb

create source/layout.erb

create source/tag.html.erb

run bundle install from "."

Could not find gem 'redcarpet (>= 3.3.3, ~> 3.3)' in any of the gem sources listed in your Gemfile.

Run bundle install to install missing gems.

再度 bundle install しろとのことで実行。tzinfo-data と wdm は消してよかったかも(Using の部分は省略)

code: shell

$ bundle

The dependency wdm (~> 0.1.0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mswin32, x86-mingw32. To add those platforms to the bundle, run bundle lock --add-platform x86-mswin32 x86-mingw32.

The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mswin32, x86-mingw32, java. To add those platforms to the bundle, run bundle lock --add-platform x86-mswin32 x86-mingw32 java.

Fetching builder 3.2.3

Fetching redcarpet 3.4.0

Installing builder 3.2.3

Installing redcarpet 3.4.0 with native extensions

Bundle complete! 6 Gemfile dependencies, 44 gems now installed.

Bundled gems are installed into ./vendor/bundle

.gitignore は最低限のものしかないので、後ろに追加

code: shell

$ gibo dump macOS Vim Rails >> .gitignore

とりあえずサーバを動かしてみる

code: shell

$ be middleman server

localhost の 4567 にアクセスしたら、サーバが動いていることが確認できた。とりあえず構築まで終了。これからコンテンツを作ってみる。

https://gyazo.com/a1b0a604a4e5fdbea0c0ccd79d4879a0

次: Layout の修正: 研究室Web(2)

#自動化

#Middleman